<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		<div id="app">
			<dog></dog>
			<person></person>
		</div>
		
		
		<template  id="personTemp">
			<div>
				<h1>{{message}}</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>{{msg}}</h1>
			</div>
		</template>
		
		
		<script  src="../js/vue.js"></script>
		<script>
	           Vue.component("person",{
				   data() {
				   	    return {
							message: "我是全局的组件"
						}
				   },
				   template: "#personTemp"
			   })
			
			let  dog={
				data(){
					return  {
						msg:  "我是局部组件"
					}
				}, 
				template: "#dogTem"
			}
			
			const  app=new  Vue({
				el: "#app",
				components: {
					dog
				}
			})
			
		</script>
		
	</body>
</html>
